<template>
  <el-dialog
    :title="`${title}角色`"
    v-model="visible"
    center
    draggable
    :before-close="close"
    width="500px"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <el-form
      ref="formRef"
      :model="formData"
      label-width="85px"
      label-position="right"
      status-icon
      label-suffix=":"
    >
      <el-form-item
        label="角色名称"
        prop="roleName"
        :rules="{
          required: true,
          message: '角色名称为必填项！',
          trigger: 'blur',
        }"
      >
        <el-input
          v-model="formData.roleName"
          placeholder="请输入角色名称"
          maxlength="30"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="角色编码" prop="roleCode">
        <el-input
          v-model="formData.roleCode"
          placeholder="请输入角色编码"
          maxlength="30"
          :rules="{
            pattern: /^[a-zA-Z0-9_]{2,30}$/,
            message: '只允许输入2~30位英文/数字/下划线',
            trigger: 'blur',
          }"
          show-word-limit
        />
      </el-form-item>
      <el-form-item
        prop="roleName"
        label="角色状态"
        :rules="{
          required: true,
          message: '角色状态为必选项！',
          trigger: 'change',
        }"
      >
        <el-switch
          v-model="formData.status"
          inline-prompt
          active-text="启"
          inactive-text="停"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入备注信息"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <el-row justify="center" class="mt10">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="submitForm">保存</el-button>
    </el-row>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs } from "vue";
import { add, update } from "@/api/System/role";
import { ElNotification } from "element-plus";
const state = reactive({
  visible: false,
  title: "新增",
  status: "",
  formData: {
    roleName: "",
    roleCode: "",
    status: false,
    remark: "",
  },
});
const { visible, title, formData } = { ...toRefs(state) };
const emit = defineEmits(["refresh"]);

const close = () => {
  //清空表单，清除校验提示
  formRef.value?.resetFields();
  state.visible = false;
};
const open = (status, row) => {
  if (status === "edit") {
    state.title = "编辑";
    state.status = "edit";
  } else {
    state.title = "新增";
    state.status = "add";
  }

  state.visible = true;
};
const formRef = ref();
const submitForm = () => {
  formRef.value?.validate((valid: boolean) => {
    if (!valid) return;
    submitData();
  });
};
const submitData = async () => {
  let res = null;
  if (state.status === "edit") {
    // 修改
    res = await update(state.formData);
  } else {
    // 新增
    res = await add(state.formData);
  }
  if (res.code === 200) {
    ElNotification({
      message: res.message,
      type: "success",
    });
  }
  close();
  // 触发父组件重新加载数据
  emit("refresh");
};
defineExpose({
  open,
});
</script>
<style lang="scss" scoped></style>
